<template>
	<view class="container">
		<view class="video-container">
			<video 
				class="video-player" 
				autoplay 
				controls
				:src="video.videoSrc"
				:loop="true"
				:muted="true"
			></video>
		</view>
		<view class="inspiration-section">
			<view class="section-header">灵感描述</view>
			<view class="section-content">{{video.description}}</view>
		</view>
		<view class="match-button-view" @click="goSame(video)">配同款</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const video = ref({})
onLoad((query)=>{
	if (query.data) {
	  const data = JSON.parse(decodeURIComponent(query.data));
	  video.value = data
	}
})

//配置同款
const goSame = (val)=>{
	const queryString = encodeURIComponent(JSON.stringify(val)); 
	uni.navigateTo({
		url:`/pages/tool/video/generation?data=${queryString}`
	})
}

</script>

<style scoped>
.container {
	background-color: white; /* 背景颜色为白色 */
	color: #333;
	padding: 20px;
	box-sizing: border-box;
	height: 100vh;
	width: 100vw;
	position: relative; /* 为定位按钮做准备 */
}

.video-container {
	width: 100%;
	margin-bottom: 20px;
}

.video-player {
	width: 100%;
	height: 300px; /* 调整视频组件的高度 */
	background-color: #000;
}

.section-header {
	font-size: 18px;
	font-weight: bold;
	margin: 20px 0 10px;
}

.section-content {
	background-color: #f5f5f5; /* 浅色背景，适应白色主题 */
	padding: 15px;
	border-radius: 10px;
}

.match-button-view {
	background-color: #00e6c3;
	color: white;
	border: none;
	border-radius: 50px;
	padding: 15px 0;
	font-size: 18px;
	width: 90%; /* 留出一些边距 */
	margin: 0 auto; /* 水平居中 */
	text-align: center;
	position: fixed; /* 固定在底部 */
	bottom: 20px;
	left: 0;
	right: 0;
}
</style>